import ajax from "../api/ajax.js";
import base from "./base.js";
export default class extends base {
    handle() {
        this.loginBtn.on("click", async e => {
            const username = this.username.val();
            const password = this.password.val();


            if (username&&password) {
                const data = await ajax.login({
                    username,
                    password
                });

                if (data._id) {
                    $(".hint").html("登录成功");
                    location.hash = "#/info"
                } else {
                    $(".hint").html("您的输入有误");
                };
            }else{
                $(".hint").html("请将信息填写完整");
            }

        });
        this.regBtn.on("click", e => {

            location.hash = `#/reg`

        })
    };
    render() {
        this.el.html(
            `  
            <section>
        <div class="login-ui ">
           <h1 style="line-height: 80px;">
             欢迎登陆
           </h1>
           <input type="text" name="username" style="margin-bottom: 30px" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input ">
           <input type="text"  name="password"  style="margin-bottom: 80px" lay-verify="title" autocomplete="off" placeholder="请输入密码" class="layui-input ">
           <button type="button" style="margin-right: 100px ;padding: 0 30px;" class="layui-btn loginBtn layui-btn-radius">登陆</button>
           <button type="button" style="padding: 0 30px;" class="layui-btn regBtn layui-btn-radius">注册</button>

           <div class="hint" style="color:red"></div>
        </div>
        </section>
        `);
        this.username = $('input[name="username"]');
        this.password = $('input[name="password"]');
        this.inpEle = $("input")
        this.loginBtn = $(".loginBtn");
        this.regBtn = $(".regBtn");
        this.loginUi = $(`.login-ui`);
        $("section").css({
            backgroundImage: "url(./IMG/bg.jfif)",
            backgroundRepeat: "no-repeat",
            backgroundSize: "100%",
            height: 100 + 'vh',
            width:"100%",
            display: "flex",
            alignItems: "center",

        })

        $(".layui-btn").css(

            {
                backgroundColor: ' #393d49d3',
            }
        )
        this.inpEle.css({
            border: "0",
            backgroundColor: ' #393d49af',
            color: "#fff"
        })
        this.loginUi.css({
            width: "380Px",
            height: '400px',
            margin: 'auto',
            textAlign: 'center',
            backgroundColor: ' #393d49af',
            borderRadius: "5px",

        })

    };;
}